<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<script src="js/flexible.debug.js"></script>
		<link rel="stylesheet" type="text/css" href="css/reset.css" />
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="css/swiper-3.4.2.min.css" />
		<title>首页</title>
	</head>

	<body>
		<header class="header">
			<span><input type="text"  placeholder="搜索菜谱、课程、生活志" class="ipt" /></span>
			<p><span><img src="img/ling.png"/>&nbsp;&nbsp;&nbsp;</span><span><img src="img/toxiang.png"/></span></p>
		</header>

		<div class="swiper-container lunbo">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="img/sw-1.png" /></div>
				<div class="swiper-slide"><img src="img/sw-1.png" /></div>
				<div class="swiper-slide"><img src="img/sw-1.png" /></div>
				<div class="swiper-slide"><img src="img/sw-1.png" /></div>
			</div>
			<div class="swiper-pagination naton"></div>
		</div>

		<nav class="navbar">
			<figrue>
				<img src="img/nav-1.png" />
				<p>菜谱分类</p>
			</figrue>
			<figrue>
				<img src="img/nav-2.png" />
				<p>厨房剧场</p>
			</figrue>
			<figrue>
				<img src="img/nav-3.png" />
				<p>健康管家</p>
			</figrue>
			<figrue>
				<img src="img/nav-4.png" />

				<p>全部应用</p>
			</figrue>
		</nav>

		<div class="img-center">
			<img src="img/ceter.png" />
		</div>

		<div class="swiper-container huadon2">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="img/huadon2.png" /></div>
				<div class="swiper-slide"><img src="img/huadon2.png" /></div>
				<div class="swiper-slide"><img src="img/huadon2.png" /></div>
				<div class="swiper-slide"><img src="img/huadon2.png" /></div>
				<div class="swiper-slide"><img src="img/huadon2.png" /></div>
				<div class="swiper-slide"><img src="img/huadon2.png" /></div>
				<div class="swiper-slide"><img src="img/huadon2.png" /></div>
			</div>
		</div>

		<div class="Recommend">
			<span>推荐菜谱</span>
		</div>
		<div class="Recommend-img">
			<img src="img/sw-1.png" />
		</div>
		<div class="swiper-container huadon">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="img/niu.png" /></div>
				<div class="swiper-slide"><img src="img/niu.png" /></div>
				<div class="swiper-slide"><img src="img/niu.png" /></div>
				<div class="swiper-slide"><img src="img/niu.png" /></div>
				<div class="swiper-slide"><img src="img/niu.png" /></div>
				<div class="swiper-slide"><img src="img/niu.png" /></div>
				<div class="swiper-slide"><img src="img/niu.png" /></div>
			</div>
		</div>

		<div class="Recommend">
			<span>智能菜谱</span>
		</div>
		<div class="Recommend-img">
			<img src="img/yu.png" />
		</div>
		<div class="swiper-container huadon">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="img/paigu.png" /></div>
				<div class="swiper-slide"><img src="img/paigu.png" /></div>
				<div class="swiper-slide"><img src="img/paigu.png" /></div>
				<div class="swiper-slide"><img src="img/paigu.png" /></div>
				<div class="swiper-slide"><img src="img/paigu.png" /></div>
				<div class="swiper-slide"><img src="img/paigu.png" /></div>
				<div class="swiper-slide"><img src="img/paigu.png" /></div>
			</div>
		</div>

		<div class="Recommend">
			<span>精彩生活志</span>
		</div>
		<div class="Recommend-img">
			<img src="img/cha.png" />
		</div>
		<div class="swiper-container huadon">
			<div class="swiper-wrapper">
				<div class="swiper-slide"><img src="img/niu.png" /></div>
				<div class="swiper-slide"><img src="img/niu.png" /></div>
				<div class="swiper-slide"><img src="img/niu.png" /></div>
				<div class="swiper-slide"><img src="img/niu.png" /></div>
				<div class="swiper-slide"><img src="img/niu.png" /></div>
				<div class="swiper-slide"><img src="img/niu.png" /></div>
				<div class="swiper-slide"><img src="img/niu.png" /></div>
			</div>
		</div>

		<div class="Recommend">
			<span>推荐商品</span>
		</div>
		<div class="swiper-container Pickoftheweek">
			<div class="swiper-wrapper">
				<div class="swiper-slide de">
					<dl>
						<dt><img src="img/xiaodugui.png"/></dt>
						<dd>
							<p>方太 家用式嵌入式消毒柜</p>
							<p>ZTNDJDNJ-WNWJ151</p>
							<p>￥3990</p>
						</dd>
					</dl>
				</div>

				<div class="swiper-slide de">
					<dl>
						<dt><img src="img/xiaodugui.png"/></dt>
						<dd>
							<p>方太 家用式嵌入式消毒柜</p>
							<p>ZTNDJDNJ-WNWJ151</p>
							<p>￥3990</p>
						</dd>
					</dl>
				</div>

				<div class="swiper-slide de">
					<dl>
						<dt><img src="img/xiaodugui.png"/></dt>
						<dd>
							<p>方太 家用式嵌入式消毒柜</p>
							<p>ZTNDJDNJ-WNWJ151</p>
							<p>￥3990</p>
						</dd>
					</dl>
				</div>

				<div class="swiper-slide de">
					<dl>
						<dt><img src="img/xiaodugui.png"/></dt>
						<dd>
							<p>方太 家用式嵌入式消毒柜</p>
							<p>ZTNDJDNJ-WNWJ151</p>
							<p>￥3990</p>
						</dd>
					</dl>
				</div>
			</div>
		</div>

		<footer class="footer">
			<figrue class="Menu">
				<img src="img/footer-1.png" />
				<p>菜谱</p>
			</figrue>
			<figrue class="Culinary">
				<img src="img/footer-2.png" />
				<p>烹饪学院</p>
			</figrue>
			<figrue class="home_page">
				<img src="img/footer-3.png" />
				<p class="active">首页</p>
			</figrue>
			<figrue class="Life">
				<img src="img/footer-4.png" />
				<p>生活日志</p>
			</figrue>
			<figrue class="fo">
				<img src="img/footer-5.png" />
				<p>FOTLSLE+</p>
			</figrue>
		</footer>
		<div class="Empty_box"></div>
		<script src="js/jquery-3.2.1.js"></script>
		<script src="js/swiper-3.4.2.jquery.min.js"></script>
		<script>
			var swiper = new Swiper('.lunbo', {
				pagination: '.naton',
				paginationClickable: true,
				spaceBetween: 30,
				centeredSlides: true,
				autoplay: 2500,
				autoplayDisableOnInteraction: false
			});

			var swiper3 = new Swiper('.huadon2', {
				slidesPerView: 1.5,
				paginationClickable: true,
				spaceBetween: 30
			});

			var swiper2 = new Swiper('.Pickoftheweek', {
				slidesPerView: 2,
				paginationClickable: true,
				spaceBetween: 30
			});

			var swiper = new Swiper('.huadon', {
				slidesPerView: 2.5,
				paginationClickable: true,
				spaceBetween: 30,
			});
			
			function Jump(){
			$('.Menu').click(function(){
				location.href="html/cai_pu.html"
			})
			
			$('.Culinary').click(function(){
				location.href="html/pengrenxuexiao.html"
			})
			
			$('.home_page').click(function(){
				location.href="index.html"
			})
			
			$('.Life').click(function(){
				location.href="html/shenhuoerzhi.html"
			})
			
			$('.fo').click(function(){
				location.href="html/FO.html"
			})
			}
			Jump()
			
			/*$('figrue').click(function(){
				$('.active').removeClass('active')
				$(this).children('p').addClass('active')
			})*/
		</script>
	</body>

</html>